<div class="default-form-background">
    <button (click)="router.navMgmtUserDashboard()" mat-button
        style="padding-left: 8px; margin-bottom: 12px; margin-left: -8px;">
        <mat-icon>arrow_back_ios</mat-icon> <span style="font-size: 16px;">{{'BACK'|translate}}</span>
    </button>

    <mat-tab-group mat-align-tabs="start" dynamicHeight>
        <mat-tab label="{{'BASIC_INFO'|translate}}" #basicTab>
            <div style="margin-top: 16px;" [formGroup]="formGroup">
                <mat-form-field>
                    <mat-label>{{'ID'| translate}}</mat-label>
                    <input matInput formControlName="id" readonly>
                </mat-form-field>
                <mat-form-field>
                    <mat-label>{{'Enter email'| translate}}</mat-label>
                    <input matInput formControlName="email" readonly>
                </mat-form-field>
                <mat-form-field>
                    <mat-label>{{'CREATED_AT'| translate}}</mat-label>
                    <input matInput formControlName="createdAt" readonly>
                </mat-form-field>
                <mat-checkbox formControlName="locked">{{'LOCKED'|translate}}</mat-checkbox>
            </div>
        </mat-tab>
        <mat-tab label="{{'LOGIN_HISTORY'|translate}}" #commonTab>
            <div style="margin-top: 16px;" class="table-container">
                <table mat-table [dataSource]="dataSource">

                    <ng-container matColumnDef="loginAt">
                        <th mat-header-cell *matHeaderCellDef> {{columnList['loginAt']|translate}} </th>
                        <td mat-cell *matCellDef="let row"> {{row.loginAt | date:'MM d, y, h:mm:ss a'}}</td>
                    </ng-container>

                    <ng-container matColumnDef="ipAddress">
                        <th mat-header-cell *matHeaderCellDef> {{columnList['ipAddress']|translate}} </th>
                        <td mat-cell *matCellDef="let row"><app-copy-field
                                [inputValue]="row.ipAddress"></app-copy-field>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="agent">
                        <th mat-header-cell *matHeaderCellDef> {{columnList['agent']|translate}} </th>
                        <td mat-cell *matCellDef="let row"><app-copy-field [inputValue]="row.agent"></app-copy-field>
                        </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
                </table>
            </div>
        </mat-tab>
    </mat-tab-group>
</div>